<template>
    <div class="newsInfo-container">

        <!-- 大标题 -->
        <h1 class="title">{{newsInfo.title}}</h1>

        <!-- 小标题 -->
        <p class="subtitle">
            <span>发表时间:{{newsInfo.add_time | dateFormat}}</span>
            <span>点击: {{newsInfo.click}}次</span>
        </p>

        <hr>

        <!-- 内容区域 -->
        <div class="content" v-html="newsInfo.content"></div>


        <!-- 评论区域 -->
        <comment-box :id="id"></comment-box>

    </div>
</template>

<script>
    import Comment from "../subcom/Comment.vue";
    export default {
        name: "NewsInfo",
        data() {
            return {
                id: this.$route.params.id,
                newsInfo: {}
            }
        },
        created() {
            this.getNewsInfo()
        },
        methods: {
            getNewsInfo() {
                this.axios.get(`getnew/${this.id}`)
                    .then(response => {
                        if (response.data.status === 0) {
                            this.newsInfo = response.data.message[0];
                        } else {
                            this.$toast('获取新闻信息失败!')
                        }
                    })
            }
        },
        components: {
            'comment-box': Comment
        }
    }
</script>

<style scoped>
    .newsInfo-container {
        padding: 0 4px;
    }
    .title {
        font-size: 30px;
        text-align: center;
        margin: 25px 0;
        color: #4a82d1;
    }
    .subtitle {
        font-size: 20px;
        color: darkgray;
        display: flex;
        justify-content: space-between;
    }
    .content >>> p {
        font-size: 30px;
        line-height: normal;
    }
    .content {
        font-size: 30px;
        line-height: initial;
        color: #8f8f94
    }

</style>